<template>
<div class="content-container">
    <!-- 轮播图 -->
    <div class="banner-swiper">
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banners" :key="index" @click="goToDetail(item.id)">
                <img :src="item.image" :alt="item.title" />
                <div class="banner-title">{{ item.title }}</div>
            </van-swipe-item>
        </van-swipe>
    </div>

    <!-- 瀑布流内容 -->
    <div class="waterfall-container">
        <div class="waterfall-column">
            <div v-for="(post, index) in leftPosts" :key="post.id" class="post-card" @click="goToDetail(post.id)">
                <div class="post-image">
                    <img :src="post.cover" :alt="post.title" />
                </div>
                <div class="post-info">
                    <div class="post-title">{{ post.title }}</div>
                    <div class="post-meta">
                        <span class="post-author">{{ post.userName }}</span>
                        <span class="post-stats">
                            <van-icon name="like-o" /> {{ post.likes }}
                            <van-icon name="comment-o" /> {{ post.comments || 0 }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="waterfall-column">
            <div v-for="(post, index) in rightPosts" :key="post.id" class="post-card" @click="goToDetail(post.id)">
                <div class="post-image">
                    <img :src="post.cover" :alt="post.title" />
                </div>
                <div class="post-info">
                    <div class="post-title">{{ post.title }}</div>
                    <div class="post-meta">
                        <span class="post-author">{{ post.userName }}</span>
                        <span class="post-stats">
                            <van-icon name="like-o" /> {{ post.likes }}
                            <van-icon name="comment-o" /> {{ post.comments || 0 }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'RecommendContent',
    props: {
        posts: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            banners: [
                { id: 1, title: '区块链技术如何改变金融行业', image: 'https://img.yzcdn.cn/vant/apple-1.jpg' },
                { id: 2, title: '比特币减半对市场的影响', image: 'https://img.yzcdn.cn/vant/apple-2.jpg' },
                { id: 3, title: '去中心化金融的未来展望', image: 'https://img.yzcdn.cn/vant/apple-3.jpg' },
            ]
        }
    },
    computed: {
        // 将帖子分为左右两列
        leftPosts() {
            return this.posts.filter((_, index) => index % 2 === 0)
        },
        rightPosts() {
            return this.posts.filter((_, index) => index % 2 === 1)
        }
    },
    methods: {
        goToDetail(id) {
            this.$router.push(`/detail/${id}`)
        },
        onScroll() {
            // 检测滚动到底部，触发加载更多
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            const clientHeight = document.documentElement.clientHeight
            const scrollHeight = document.documentElement.scrollHeight

            if (scrollTop + clientHeight >= scrollHeight - 50) {
                this.$emit('loadMore')
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.onScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.onScroll)
    }
}
</script>

<style scoped>
.content-container {
    padding: 10px;
}

.banner-swiper {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.banner-swiper img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: 10px;
    font-size: 14px;
}

.waterfall-container {
    display: flex;
    gap: 10px;
}

.waterfall-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.post-image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.post-info {
    padding: 10px;
}

.post-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.post-stats {
    display: flex;
    gap: 8px;
}

.post-stats .van-icon {
    margin-right: 2px;
}
</style>